<template>
  <div>
    <div class="columns">
    <transition name="animate__animated animate__bounce"
                    enter-active-class="animate__fadeInLeft"
                     appear>
          <el-calendar>
            <template
                slot="dateCell"
                slot-scope="{date, data}" >
              <p v-if="exist(data)" @click="showData(data)">
                {{ data.day.split('-').slice(1).join('-') }} ✔
              </p>
              <p v-else @click="showData(data)">
                {{ data.day.split('-').slice(1).join('-') }}
              </p>
            </template>
          </el-calendar>
        </transition>
    </div>
  </div>

</template>

<script>
import {v4}  from'uuid'
import {mapGetters} from "vuex";
import Learn from "./Learn";
import user from "../../store/modules/user";
import {addDay, getDays} from "../../api/user";
export default {
  name: "Practice",
  components: {Learn},
  data(){
    return{
      value:new Date(),
      dataList:[]
    }
  },
  computed:{
    getNowFormatDate() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      return year + seperator1 + month + seperator1 + strDate;
    },
    ...mapGetters(['user'])

  },
  mounted() {
    getDays(this.user.id).then((res)=>{
      console.log(res.data)
        this.dataList=res.data
      if(this.dataList.indexOf(this.getNowFormatDate)>=0){
        this.$router.push({path:'/learn'})
      }
    })

  },
  methods:{
    showData(data){
      console.log(this.user.id)
      console.log(this.getNowFormatDate)
      console.log(data)
      this.isToday(data)
    },
    isToday(data){
      if(this.getNowFormatDate===data.day){
        this.dataList.push(this.getNowFormatDate)
        let data={id:v4(),userId:this.user.id,day:this.getNowFormatDate}
        addDay(data).then((res)=>{
          this.$message.success(res.message)
          this.$router.push({path:'/learn'})
        }).catch((err)=>{
          console.log(err)
        })
      }
      else{
        this.$message("只能签到今天哦")
      }
    },
    exist(data){
      if(this.dataList.indexOf(data.day)>=0){
        return true;
      }
      return false;
    }
  },

}
</script>

<style scoped>
.is-selected {
  color: #1989FA;
}
</style>